<template>
    <section id="shopcart">
      <section class="header">
          <table class="tb_form">
        <tbody>
          <tr>
          <td>商品名称：</td>
          <td><input id="goods_name" required /></td>
        </tr>
        <tr>
          <td>商品价格：</td>
          <td><input id="goods_price"  required /></td>
        </tr>
        <tr>
          <td>商品数量：</td>
          <td><input id="goods_quantity" required /></td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button>添加商品</button> <!--@click="add"-->
          </td>
        </tr>
        </tbody>
        </table>
      </section>
      <hr />
      <section class="search">
        请输入关键字：<input id="keywords"  /><button>搜索商品</button>
      </section>
      <hr />
      <section>
        <table class="goods-list" border="1" cellspacing="0">
          <thead>
            <tr>
              <th>商品编号</th>
              <th>商品名称
              </th>
              <th>商品单价</th>
              <th>商品数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr  style="text-align: center;" v-for="(item,index) in goodsList">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.price }}</td>
              <td><button id="btn-add" >+</button>
                <input class="number"  style="width: 20px;":Value="item.quantity" />
                <button id="btn-min">-</button>
              </td>
              <td>
                <button @click="removItem(index)">移除</button>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="5">购物车商品总价：¥100元</td>
            </tr>
          </tfoot>
        </table>
      </section>
    </section>
  </template>
  
  <style>
    table{
      margin: 0 auto;
      line-height: 40px;
    }
  
    .search{
      text-align: center;
    }
  </style>
  
<script setup lang="ts">
import { reactive, toRaw, toValue } from 'vue';

//构建数据
interface GoodsInfo{
    id:string;
    name:string;
    price:string;
    quantity:number
}

//定义封装相应式数据的对象
interface Data{
    goodsList:Array<GoodsInfo>
}

//构建数据
let data:Data = reactive({
    goodsList:[
        {id:'1',name:"小米",price:3999,quantity:1},
        {id:'2',name:"苹果",price:7999,quantity:2}
    ]
})

//结构数据
let {goodsList} = {...toRaw(data)}

//删除商品
function removItem(index:number){
    //index:从哪儿开始删除，1表示删除一个
    data.goodsList.splice(index,1)
}

</script>

